<template>
  <div class="container">
    <div class="chart" ref="yearTrend_ref"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      const legendName = ["上游", "中游", "下游", "全流域"];
      //  2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
      //  805,747, 769, 760, 822, 798, 783, 815, 835,
      //  679,643, 665, 626, 652, 661, 643, 646, 666,
      //  607,608, 626, 586, 603, 607, 577, 596, 609,
      // 734.49493, 694.239, 698.66659, 691.23685, 734.49834, 725.42174,706.35549, 727.82767, 746.45279,
      const xData = [
        2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011,
        2012,
      ];
      const upData = [
        698, 772, 796, 824, 803, 729, 733, 799, 772, 797, 736, 758, 774,
      ];
      const middleData = [
        566, 634, 663, 653, 637, 605, 609, 636, 612, 631, 603, 628, 654,
      ];
      const downData = [
        529, 551, 585, 561, 564, 555, 561, 572, 549, 566, 536, 610, 591,
      ];
      const allData = [
        629.39, 682.32, 689.477, 725.76372, 710.82839, 662.52531, 667.53054,
        710.99268, 645.50836, 687.54721, 662.66149, 694.73443, 707.31673,
      ];
      //初始化图表
      this.chartInstance = this.$echarts.init(this.$refs.yearTrend_ref, "dark");
      const option = {
        backgroundColor: "rgba(0, 0, 0, 0)",
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        tooltip: {
          backgroundColor: "rgba(16,12,42,0.9)",
          trigger: "axis",
          textStyle: {
            color: "#fff",
          },
          axisPointer: {
            type: "cross",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#161522",
              },
            },
          },
        },
        grid: {
          top: "10%",
          left: "3%",
          right: "12%",
          bottom: "3%",
          containLabel: true,
        },
        color: ["#b54c5d"],
        calculable: true,
        xAxis: {
          type: "category",
          // boundaryGap: true,
          data: xData,
          // type: "time",
          name: "年份",
          boundaryGap: false,
          splitNumber: 5,
          // axisLabel: {
          //   formatter(value) {
          //     let date = new Date(value);
          //     return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
          //   }
          // },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#2867a8",
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          max: 900,
          min: 500,
          scale: true,
          name: "年均npp",
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#2867a8",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              opacity: 0,
            },
            name: "上游",
            data: upData,
            type: "line",
            smooth: true,
          },
          {
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              opacity: 0,
            },
            name: "中游",
            data: middleData,
            type: "line",
            smooth: true,
          },
          {
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              opacity: 0,
            },
            name: "下游",
            data: downData,
            type: "line",
            smooth: true,
          },
          {
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              opacity: 0,
            },
            name: "全流域",
            data: allData,
            type: "line",
            smooth: true,
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}
.chart {
  width: 100%;
  height: 100%;
}
</style>